﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="StockTicker.aspx.cs" Inherits="FirstPlaySignalR.Chat" %>


<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <style>
        body {
            font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
            font-size: 16px;
        }

        #stockTable table {
            border-collapse: collapse;
        }

            #stockTable table th, #stockTable table td {
                padding: 2px 6px;
            }

            #stockTable table td {
                text-align: right;
            }

        #stockTable .loading td {
            text-align: left;
        }

        #stockTicker {
            overflow: hidden;
            width: 760px;
            height: 24px;
            border: 1px solid #999;
        }

            #stockTicker .inner {
                width: 9999px;
            }

            #stockTicker ul {
                display: inline-block;
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

            #stockTicker li {
                display: inline-block;
                margin-right: 10px;
            }

            /*<li data-symbol="{Symbol}"><span class="symbol">{Symbol}</span><span class="price">{Price}</span><span class="change">{PercentChange}</span></li>*/
            #stockTicker .symbol {
                font-weight: bold;
            }

            #stockTicker .change {
                font-style: italic;
            }

        table th {
            background-color: rgb(215,215,215);
            padding: 10px 20px;
        }

        table tr td, th {
            border: solid 1px rgb(190,190,190);
            text-align: center;
        }

        /*table tr:nth-child(2n+1) {
            background-color: rgba(215, 215, 215,0.50);
        }

        table tr:nth-child(2n+2) {
            background-color: rgba(250,250,250,0.50);
        }*/

        table colgroup col {
            width: 110px;
        }

            table colgroup col:nth-child(2n+1) {
                background-color: rgba(226, 242, 159, 0.60);
            }

            table colgroup col:nth-child(2n+2) {
                background-color: rgba(192, 250, 175, 0.60);
            }

        .up {
            background-color: rgba(41, 194, 4, 0.30)
        }

        .down {
            background-color: rgba(250, 15, 0, 0.30)
        }
        .noChange{
             background-color: rgba(215, 215, 215,0.50);
        }
    </style>
    <h1>ASP.NET SignalR 股票行情自动收录器示例</h1>

    <div>
        <input type="button" id="openMarket" value="开市" />
        <input type="button" id="closeMarket" value="收市" />
        <input type="button" id="resetMarket" value="重置" />
    </div>
    <h2>股票表</h2>
    <div id="stockTable">
        <table border="1">
            <colgroup>
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
                <col />
            </colgroup>
            <thead>
                <tr>
                    <th>股票标示</th>
                    <th>价格</th>
                    <th>开盘价格</th>
                    <th>最高价格</th>
                    <th>最低价格</th>
                    <th>变动</th>
                    <th>变动(%)</th>
                </tr>
            </thead>
            <tbody>
                <tr class="loading">
                    <td colspan="7">加载中...</td>
                </tr>
            </tbody>
        </table>
    </div>
    <h2>股票报价</h2>
    <div id="stockTicker">
        <div class="inner">
            <ul>
                <li class="loading">loading...</li>
            </ul>
        </div>
    </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.4.1.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <script src="Scripts/StockTicker.js"></script>
</asp:Content>
